<template>
    <!-- 交接班列表 -->
    <div class="handover-list-wrap">
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="值班开始日期"
                        end-placeholder="值班结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item v-if="$store.state.userinfo.isMuilUnitUser === 1">
                    <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择业主单位">
                        <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
                        <el-option
                            v-for="item in orgList"
                            :key="item.organizationId"
                            :label="item.shortName"
                            :value="item.organizationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-row class="name-choose-wrap">
                        <el-col :span="8">
                            <el-select filterable @change="search" v-model="searchForm.type">
                                <el-option label="值班人员" value="0"></el-option>
                                <el-option label="接班人员" value="1"></el-option>
                                <el-option label="消控室名称" value="2"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="16">
                            <el-input
                                :placeholder="mapContentPlaceholder()"
                                v-model="searchForm.content"
                                @keyup.enter.native="search"
                                clearable>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=''" :class="searchForm.status==='' ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-5">{{ handoverStatistics.totalCount }}</p>
                    <p class="item-title">值班单总数（个）</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=0" :class="searchForm.status===0 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-4">{{ handoverStatistics.onDutyCount }}</p>
                    <p class="item-title">值班中（个）</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=1" :class="searchForm.status===1 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-3">{{ handoverStatistics.finishCount }}</p>
                    <p class="item-title">成功交班（个）</p>
                </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="item-wrap" @click="searchForm.status=2" :class="searchForm.status===2 ? 'active' : ''">
                <div class="item-content">
                    <p class="item-value color-1">{{ handoverStatistics.unDutyCount }}</p>
                    <p class="item-title">未完成交班（个）</p>
                </div>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="examTableList"
                :data="tableData"
                style="width: 100%">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column v-if="$store.state.userinfo.isMuilUnitUser === 1" label="业主单位" prop="orgName" width="200"></el-table-column>
                <el-table-column label="值班状态" prop="status">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 0" class="type-tags type-color-4">值班中</div>
                        <div v-else-if="scope.row.status === 1" class="type-tags type-color-3">成功交班</div>
                        <div v-else class="type-tags type-color-1">未完成交班</div>
                    </template>
                </el-table-column>
                <el-table-column label="消控室名称" prop="controlName"></el-table-column>
                 <el-table-column label="值班人员" prop="dutyUserName"></el-table-column>
                <el-table-column label="值班时间段" prop="dutyTimeStr" width="350"></el-table-column>
                <el-table-column label="交班时间" prop="shiftsTime" width="200">
                    <template slot-scope="scope">
                        <p>{{ scope.row.shiftsTime || '-' }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="接班人员" prop="shiftsUserName" width="200"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 详情弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            title="交接班详情"
            width="1000px"
            top='5vh'
            v-if="dialogDetailView"
            :visible.sync="dialogDetailView"
            @close="closeDetailDialog"
            v-dialogDrag>
            <handover-details :baseInfo="currentRowInfo" :closeFun="closeDetailDialog"></handover-details>
        </el-dialog>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import HandoverDetails from './Dialog/HandoverDetails'
import { selectShiftsRecordCountByStatus, selectShiftsRecordList } from '@/api/shifts'

export default {
    name: 'HandoverList',
    components: {
        HandoverDetails
    },
    data() {
        return {
            loading: true,
            utils: utils,
            orgList: [],
            searchForm: {
                time: '',
                orgIds: this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
                status: '',
                content: '',
                type: '0'
            },
            handoverStatistics: {
                finishCount: 0,  // 成功交班数
                onDutyCount: 0, // 值班中数
                unDutyCount: 0, // 未成功交班数
                totalCount: 0  // 总数
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogDetailView: false,
            currentRowInfo: {} // 当前操作的行数据
        }
    },
    created() {
        // 如果是多单位请求单位下拉框数据
        if(this.$store.state.userinfo.isMuilUnitUser) {
            // 获取业主单位信息
            getOrgList({
                queryType: 0
            }).then(res => {
                if(res.status = 200) {
                    this.orgList = res.data
                }
            })
        }
        
        this.search()
    },
    methods: {
        mapContentPlaceholder() {
            let MapList = {
                0: '值班人员',
                1: '接班人员',
                2: '消控室名称',
            }

            return `请输入${MapList[this.searchForm.type]}名称`
        },
        mapStatus(key) {
            let MapList = {
                0: '值班中',
                1: '成功交班',
                2: '未完成交班',
            }

            return MapList[key] || ''
        },
        // 获取统计信息
        getStatisticsData() {
            let that = this
            selectShiftsRecordCountByStatus({
                orgIds: that.searchForm.orgIds,
                startTimeStr: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTimeStr: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                queryContent: that.searchForm.content, // 搜索关键字
                type: that.searchForm.type, // 关键字类别
            }).then(res => {
                if(res.status === 200) {
                    $.extend(that.handoverStatistics, res.data)
                }
            })
        },
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            selectShiftsRecordList({
                orgIds: that.searchForm.orgIds,
                startTimeStr: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTimeStr: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                status: that.searchForm.status, // 交接班状态
                queryContent: that.searchForm.content, // 搜索关键字
                type: that.searchForm.type, // 关键字类别
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        search() {
            this.getStatisticsData()
            this.getTableData(1)
        },
        // 打开详情
        handleDetail(row) {
            this.currentRowInfo = row
            this.dialogDetailView = true
        },
        // 关闭详情预览弹框
        closeDetailDialog() {
            this.dialogDetailView = false
        }
    },
    computed: {
        statusChange() {
            return this.searchForm.status
        }
    },
    watch: {
        statusChange(val) {
            this.getTableData(1)
        }
    }
}
</script>
<style lang="scss" scoped>
.handover-list-wrap {
    .serach-form {
        .name-choose-wrap {
            width: 350px;
        }
    }
}
</style>